<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Flotr: Basic Pie Example</title>
		<link rel="stylesheet" href="style.css" type="text/css" />

		<script type="text/javascript" src="../../flotr/prototype/lib/prototype.js"></script>
		<script type="text/javascript" src="examples.js"></script>
		
		<!--[if IE]>
			<script type="text/javascript" src="../../flotr/prototype/lib/excanvas.js"></script>
			<script type="text/javascript" src="../../flotr/prototype/lib/base64.js"></script>
		<![endif]-->
		<script type="text/javascript" src="../../flotr/prototype/lib/canvas2image.js"></script>
		<script type="text/javascript" src="../../flotr/prototype/lib/canvastext.js"></script>
		<script type="text/javascript" src="../../flotr/prototype/flotr.js"></script>
	</head>
	<body>
		
		<!-- ad -->
		
		<div id="wrapper">
			<h1></h1>
			<div id="container" style="width:600px;height:300px;"></div>
			<h2>Example</h2>
			<p>This example shows the ease of using Flotr. With just one line of javascript you can
			draw a nice looking graph.</p>
			<p>Finished? Go to the example <a href="index.html" title="Flotr Example Index Page">index page</a>, play with the <a href="../../playground/index.html" title="Flotr playground">playground</a> or read the <a href="http://www.solutoire.com/flotr/docs/" title="Flotr Documentation Pages">Flotr Documentation Pages</a>.</p>
			<h2>The Code</h2>
			<pre id="code-view"><code class="javascript"></code></pre>
			<div id="footer">Copyright &copy; 2008 Bas Wenneker, <a href="http://www.solutoire.com">solutoire.com</a></div>
		</div>
		
    <!-- ad -->
		
		<script type="text/javascript">
document.observe('dom:loaded', function(){
	// Fill series.
	var d1 = [[0, 4]];
	var d2 = [[0, 3]];
	var d3 = [[0, "1.03"]];
	var d4 = [[0, 3.5]];
	
	//Draw the graph.
	var f = Flotr.draw($('container'), [
		{data:d1, label: 'Comedy'}, 
		{data:d2, label: 'Action'}, 
		{data:d3, label: 'Romance', pie:{explode: 50} }, 
		{data:d4, label: 'Drama'}
 ], {
			HtmlText: false, 
			grid: {
				verticalLines: false, 
				horizontalLines: false
			},
			xaxis: {showLabels: false},
			yaxis: {showLabels: false}, 
			pie: {
        show: true, 
        explode: 6
      },
			legend:{
				position: 'se',
				backgroundColor: '#D2E8FF'
			}
	});
});
		</script>

		<!-- analytics -->
	</body>
</html>
